import React from "react";
import "./index.css";

// 导出组件 / 暴露组件
export default class NumberList extends React.Component {
  /* 声明数组 */
  state = {
    // 定义标题
    title: "React入门",
    list: [2, 4, 6, 8, 10],

    // 动态变量
    times: 10,
      
    // 颜色加深状态值
    change: 0,
  };

  // 挂载
    componentDidMount() {

        setInterval(() => {
            // this.forceUpdate();
      this.setState({
          times: this.state.times - 1,
      });
          if (this.state.times <= 0) {
              this.setState({
                  times: 10
              })
      }
    }, 1000);
  }

  // 按钮功能项

  // 奇数行颜色加深 or 偶数行颜色加深 or 正常显示
  handleOddOrEvenOrNormalClick = (status) => {
    if (status === 2) {
      this.setState({
        change: status
      });
      // console.log("偶数行加深" + this.state.change);
    } else if (status === 1) {
      this.setState({
        change: status
      });
      // console.log("奇数行加深" + this.state.change);
    } else if (status === -1) {
      this.setState({
        change: status
      });
      // console.log("正常显示" + this.state.change);
    }
  };

  render() {
    return (
      <>
        <h1>{this.state.title}</h1>
        <div className="btns">
          <button onClick={() => {this.handleOddOrEvenOrNormalClick(1);}}>奇数行加深</button>
          <button onClick={() => {this.handleOddOrEvenOrNormalClick(2);}}>偶数行加深</button>
          <button onClick={() => { this.handleOddOrEvenOrNormalClick(-1);}}>正常显示</button>
        </div>
        <ul className="ls">
          {this.state.list.map((item, index) => {
            let cls = `line ${index % 2 ? "line-even" : "line-odd"}`;
            // 判断样式，切换className
            if (this.state.change === 1) {
              cls = `line ${index % 2 ? "": "deep"}`;
            } else if (this.state.change === 2) {
              cls = `line ${index % 2 ? "deep" : ""}`;
            } else if (this.state.change === -1) {
              cls = `line ${index % 2 ? "line-even" : "line-odd"}`;

            }
            return (
              <li className={cls} key={index}>
                {item}
              </li>
            );
          })}

          <h1>{this.state.times}秒</h1>
        </ul>
      </>
    );
    }
}
